<style>
  .theme {
    border: #def solid 1px;
    text-align: center;
    position:absolute;
  }
  
  .theme-info {
    background: #def;
    color: #000;
    height: 36px;
    line-height: 36px;
  }
  
  .theme:hover .theme-info, .theme.selected:hover .theme-info {
    background: #07c;
    color: #fff;
  }
  
  .theme.selected .theme-info {
    background: #060;
    color: #fff;
  }
  
  .theme:hover .theme-info a, .theme.selected .theme-info a {
    color: #fff;
  }
  
  .mobile {
    box-sizing: content-box;
    padding: 10px;
  }
  
  .mobile-top {
    height: 40px;
    width: 315px;
    background: #000;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-sizing: content-box;
  }
  
  .mobile-body {
    height: 560px;
    width: 315px;
    background: #fff;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    box-sizing: content-box;
  }
  
  .mobile-body iframe {
    width:100%;
    height:100%;
  }
  
  .mobile-bottom {
    height: 60px;
    line-height: 60px;
    width: 315px;
    background: #000;
    border-left: #000 solid 15px;
    border-right: #000 solid 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: content-box;
    color: #fff;
  }
  
  .mobile-body img {
    width: 100%;
  }
  
  .setting{
  margin-left:400px;
  min-height:680px;
  }
  
  .setting h4{
    height:36px;
    line-height:36px;
    border-bottom:#ddd solid 1px;
    margin-top:0;
  }
  
  .color-preview{
    display:block;
  width:20px;
  height:20px;
  float:right;
  margin-left:10px;
  border:#000 solid 1px;
  }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/Common/bigcolorpicker/jquery.bigcolorpicker.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/bigcolorpicker/jquery.bigcolorpicker.min.js"></script>
<div class="theme">
  <div class="mobile">
    <div class="mobile-top"></div>
    <div class="mobile-body">
      <iframe id="iframe" src="{$indexUrl}"></iframe>
    </div>
    <div class="mobile-bottom">{$theme.name}</div>
  </div>
</div>
 <div class="setting">
   <h4>颜色设置</h4>
  <form action="" method="post" role="form" id="color-form" class="form-horizontal">
    <volist name="colorConfig" id="vo">      
    <div class="form-group">
      <label for="{$vo.varName}" class="col-sm-2 control-label"><span id="{$vo.varName}_preview" class="color-preview" style="background-color:{$vo.value}"></span>{$vo.varTitle}</label>
      <div class="col-sm-2">
        <input type="text" class="form-control" name="config[{$vo.varName}]" id="{$vo.varName}" placeholder="" value="{$vo.value}" />
      </div>
    </div>
    </volist>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-8">
      	<input type="hidden" name="id" value="{$theme.id}">
        <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/savePost" data-action-callback="reload">保存更改</button>
      </div>
    </div>
  </form>
 </div>
 
 <script type="text/javascript">
   function reload () {
     $("#iframe").attr("src", "{$indexUrl}?" + new Date().getTime() );
   };
   
   $(function(){
    $("#color-form input[type='text']").bigColorpicker(function(el,color){
      var id = $(el).attr("id");
      $(el).val(color);
      $( "#" + id + "_preview" ).css("backgroundColor", color)
    });
  });
 </script>